<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <style>
        html {
            /* 设置rem:  1rem=100px(设计图) */
            font-size: -webkit-calc(100vw/7.5);
        }

        body {
            font-size: 0.24rem;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #app .main {
            flex: 1;
            overflow-y: auto;
        }

        #app .footer {
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            display: flex;
            border-top: 1px solid #707070;
        }

        #app .footer a {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- <div class="main">
            主页的内容
        </div> -->
        <component class="main" :is="compName"></component>
        <div class="footer">
            <a href="#/" >首页</a>
            <a href="#/list" >列表</a>
            <a href="#/car" >购物车</a>
            <a href="#/mine" >我的</a>
        </div>
    </div>
</body>
<script>

    // 路由:
    // 后端路由(接口) ->  对应不同的路由地址返回不同的数据  => 前端向对应的路由地址(后端接口)发送请求,服务端返回不同的结果
    // 页面路由(站点) -> 浏览器访问服务器站点中的文件(/day01/html/01.html) => 服务器从站点中找到该文件所在地址 读取之后 返回给浏览器


    // 单页面引用  => 所有的页面相关的组件都在根组件中挂载 => 公用一个页面, 在通过路径记录访问的地址

    // 前端路由:  对应不同的路由地址展示不同的页面
    // history

    // hash路由    -> 用hash值模拟路由/路径
    // 优点:
    // 1. 修改hash值不会触发页面刷新
    // 2. hash值不会随着请求传递给后端

    // 自己提前定义好
    // /  -> 首页
    // /list -> 列表页
    // /car  -> 购物车
    // /mine -> 我的

    // 模拟实现vue-router  


    // 组件相关的配置
    let Home = {
        template: `<div class="home">
            主页的内容
        </div>`
    }

    let List = {
        template: `<div class="list">
            列表的内容
        </div>`
    }

    let Car = {
        template: `<div class="car">
            购物车的内容
        </div>`
    }

    let Mine = {
        template: `<div class="mine">
            我的内容
        </div>`
    }


    let NotFound = {
        template: `<div class="mine">
            404
        </div>`
    }

    // 将路由(自定义路径)和组件关联起来  => 路由配置
    let routes = [{
        path: "/",
        name: "home",
        component: Home,
    }, {
        path: "/list",
        name: "list",
        component: List,
    }, {
        path: "/car",
        name: "car",
        component: Car,
    }, {
        path: "/mine",
        name: "mine",
        component: Mine,
    },{
        path: "/404",
        name: "not-found",
        component: NotFound,
    }]


    var app = new Vue({
        el: "#app",
        data: {
            compName: "home"
        },
        methods: {
            hashHandler(){
                // 取出hash值  处理#  -> 如果没有hash默认访问主页面 =>  "/"
                let hash = location.hash.replace("#", "") || "/";
                console.log(hash);
                let route = routes.find(v => v.path == hash);
                console.log(route);
                if (route) {
                    this.compName = route.name;
                }else{
                    // this.compName = "not-found";
                    location.hash="#/404"
                }
            }
        },
        mounted() {

            // 页面挂载时默认执行一次
            this.hashHandler();

            // 绑定事件监听hash值改变  => 事件触发时才会执行
            window.addEventListener("hashchange", () => {
                console.log("hashchange", location.hash);
                this.hashHandler();
            })
        },
        components: {
            Home,
            List,
            Car,
            Mine,
            NotFound
        }
    })
</script>

</html>